<template>
  <div class="details-wrap">
    <!-- 搜索 -->
    <div class="search-details">
      <input v-model="aa" type="text" placeholder="搜索商品信息" />
      <button style="padding: 0 10px" @click="changeType">
        {{ curModel }}
      </button>
    </div>
    <!-- vans 价格 销量 新品 -->
    <div class="details-sorts">
      <div>默认</div>
      <div>价格</div>
      <div>销量</div>
      <div>新品</div>
    </div>
    <!-- 展示商品详情 -->
    <div class="details-list">
      <!-- 取反 !isColumn 默认是行 才能拥有行这个类名 -->
      <div
        :class="{ details_list_item: true, item_row: !isColumn }"
        v-for="item in searchs"
        :key="item.id"
      >
        <img class="img-col" :src="item.image" alt="" />
        <div class="list-info">
          <h3>{{ item.store_name }}</h3>
          <p>￥{{ item.price }}</p>
          <span>已售{{ item.sales }}{{ item.unit_name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClassifyDetails",

  data() {
    return {
      searchs: [],
      aa: "",
      curModel: "列", // 按钮默认显示列
      isColumn: true, // 是否默认为列 true  false是行
    };
  },

  methods: {
    changeType() {
      this.isColumn = !this.isColumn; // 不断取反 这样就不是默认的列，根据取反后的值再进行判断
      if (this.isColumn) this.curModel = "列";
      else this.curModel = "行"; // 切换行时再把类名传过去 即实现行
    },
  },
  created() {
    this.aa = this.$route.query.aa;
    // this.so = this.$route.query.so;
    // https://demo26.crmeb.net/api/products?sid=0&keyword=%E6%89%8B%E6%9C%BA&priceOrder=&salesOrder=&news=0&page=1&limit=20&cid=0&productId=
    this.$request(
      `https://demo26.crmeb.net/api/products?sid=0&keyword=${this.aa}&salesOrder=&news=0&page=1&limit=20&cid=0&productId=`
    ).then((data) => {
      this.searchs = data.data;
      console.log(this.searchs);
    });
  },
};
</script>

<style lang="scss" scoped>
.details-wrap {
  .search-details {
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ff448f!important;
  }
  /* vans 价格 销量 新品 */
  .details-sorts {
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    div {
      color: #454545;
      font-size: 14px;
    }
  }
  /* vans 价格 销量 新品 */
  .details-list {
    width: 100vw;
    height: calc(100vh - 50px - 50px - 51px);
    overflow-y: scroll;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    &::-webkit-scrollbar {
      // width: 0 !important;  也可以隐藏
      display: none;
    }
    .details_list_item {
      width: 45%;
      flex-shrink: 0;
      background-color: #fff;
      padding: 5px 10px;
      margin: 10px 0;
      box-sizing: border-box;
      border-radius: 15px;
      .img-col {
        width: 158px;
        height: 158px;
      }
      .list-info {
        h3 {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
          color: #222;
          font-weight: normal;
        }
        p {
          color: #ff448f !important;
          font-size: 15px;
        }
        span {
          font-size: 11px;
          color: #aaa;
        }
      }
    }
    /* 横排样式 */
    .item_row {
      width: 100vw !important;
      display: flex;
      align-items: center;
      border-radius: 7px;
      box-sizing: border-box;
      width: 355px !important;
      .img-col {
        width: 70px;
        height: 70px;
        z-index: 1000;
      }
      .list-info {
        h3 {
          width: 280px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
